<template>
	<div class="acti_container">
	<div class="acti_nav">
		<el-breadcrumb separator="/">
		  <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item :to="{ name: 'activity' }">活动报名中心</el-breadcrumb-item>
		</el-breadcrumb>
	</div>
		<div class="acti_lists"  v-loading="isLoad">
			<Card :item="item" class="card" v-for="item in activity":key="item.id"/>
		</div>
	</div>
</template>
<script>
	import Card from '@/widget/Card/card';
	export default {
		name: 'activity',
		components:{
			Card,
		},
		data() {
			return {
			   page: '1',//当前页
			   pageSize: '10',
			   activity:[],
			   isLoad: true,
			}
		},
		methods:{
			getList() {
				this.$http({
				  method: 'get',
				  url: '/activity/list',
				  params: {
				    page: this.page,
				    pageSize: this.pageSize
				  },
				}).then((response)=>{
				    if(response.data && response.data.status === 'SUCCESS'){
						const { object } = response.data;
						this.activity = object.objects;
						this.isLoad = false;
				    }
				})
				.catch(function (error) {
				   console.log(error);
				});
			}
		},
		created: function(){
			this.getList();
		}
	}
</script>
<style scoped>
	.acti_container {
		padding: 10px 150px;
		margin: 10px auto;
	}
	.acti_nav {
		margin: 10px;
		font-size: 1.5rem!important;
	}
	.acti_lists{
		display: flex;
		flex-wrap:wrap;
		
	}
	.card {
		margin: 10px;
		width: 30%;
	}
	.card:hover {
		box-shadow: 2px 2px 12px rgba(0,0,0,.12);
		transition: box-shadow 0.15s;
	}
</style>